<template>
	<view>
		<!-- 上半部分主体 -->
		<view class="up_body">
			<!-- 顶部导航栏 -->
			<view class="top">
				<view class="top_banner">
					<!-- 返回按钮 -->
					<text class="goback" @click="goBack">取消</text>
					<!-- 标题 -->
					<text class="goback top_title">分享至</text>
				</view>
				<!-- 搜索框 -->
				<view class="search_box">
					<u-search :showAction="true" placeholder="搜索" actionText="取消" bgColor="#fff" :animation="true"
						searchIconSize="25px" height="30px" margin="5rpx 30rpx"></u-search>
				</view>
			</view>
			<text style="display: block; color: #b4b4b4; font-size: 28rpx; margin: 30rpx 50rpx 10rpx;">快捷分享</text>
			<!-- 用户列表 -->
			<view class="user_list">
				<view v-for="user in users" :key="user.id" @click="selectUser(user)" class="user_item">
					<image :src="user.avatar" class="user_avatar" />
					<text class="user_name">{{ user.name }}</text>
				</view>
			</view>
		</view>
		<!-- 下半部分 -->
		<view class="bottom_body">
			<view class="top_banner bottom_top" @click="myGroup">
				<!-- 返回按钮 -->
				<text class="goback" style="font-size: 34rpx;">我的群聊</text>
				<!-- 标题 -->
				<image class="iconfont right_go" src="@/static/Myimg/right.png" mode=""></image>

			</view>
			<view class="">
				<u-line margin=" 10rpx auto 30rpx" length="360px"></u-line>
			</view>
			<view class="Chat_recently">
				<text style="font-size: 30rpx; color: #868686; margin-left: 35rpx;">最近聊天</text>
				<view class="Chat_recently_content">
					<view class="content_item" v-for="(item, index) in users" :key="item.id" >
						<u-checkbox-group class="choose_k">
							<u-checkbox shape="circle" active-color="red" size="20px" iconSize="16px" labelSize="15px"
								labelColor="#444444" :value="item.checked" @change="send(item)"></u-checkbox>
						</u-checkbox-group>
						<view class="item_img_box">
							<image class="iconfont item_img" :src="item.avatar" mode=""></image>
						</view>
						<text style="font-size: 30rpx; color: black; margin-left: 180rpx;">{{item.name}}</text>
						<view class="">
							<u-line margin=" 40rpx auto " length="360px"></u-line>
						</view>
					</view>

				</view>
				<text style="font-size: 30rpx; color: #868686; margin-left: 35rpx;">互关好友</text>
				<view class="Chat_recently_content">
					<view class="content_item" v-for="(item,index) in cross_users" key="index" >
						<u-checkbox-group class="choose_k" >
							<u-checkbox shape="circle" active-color="red" size="20px" iconSize="16px" labelSize="15px"
								labelColor="#444444" :value="item.checked" @change="send(item)"></u-checkbox>
						</u-checkbox-group>
						<view class="item_img_box">
							<image class="iconfont item_img" :src="item.avatar" mode=""></image>
						</view>
						<text style="font-size: 30rpx; color: black; margin-left: 180rpx;">{{item.name}}</text>
						<view class="">
							<u-line margin=" 40rpx auto " length="360px"></u-line>
						</view>
					</view>
				</view>
				<text style="font-size: 30rpx; color: #868686; margin-left: 35rpx;">全部关注</text>
				<view class="Chat_recently_content">
					<view class="content_item" v-for="(item,index) in all_users" key="index" >
						<u-checkbox-group class="choose_k" :value="item.checked" @change="send(item)">
							<u-checkbox shape="circle" active-color="red" size="20px" iconSize="16px" labelSize="15px"
								labelColor="#444444" ></u-checkbox>
						</u-checkbox-group>
						<view class="item_img_box">
							<image class="iconfont item_img" :src="item.avatar" mode=""></image>
						</view>
						<text style="font-size: 30rpx; color: black; margin-left: 180rpx;">{{item.name}}</text>
						<view class="">
							<u-line margin=" 40rpx auto " length="360px"></u-line>
						</view>
					</view>
				</view>
			</view>
			<view class="most_bottom">
				<text>- THE END -</text>
			</view>
			
		<view class="nul" v-show="sendPopup">
			
		</view>
		</view>
			<view class="popup_box" v-show="sendPopup">
						<view class="popup_box_first">
							<text class="popup_text">发送给：</text>
							<view class="img_box">
								<view class="" v-for="(item) in selectedUsers ">
									<image class="iconfont popup_img" :src="item.avatar" mode=""></image>
								</view>
							</view>
						</view>
		
						<view class="">
							<u-line margin=" 5rpx auto" length="360px"></u-line>
						</view>
						
						<view class="popup_box_core">
							<view class="popup_box_content">
								<u--textarea autoHeight style="height: 280rpx;" v-model="value1" placeholder="跟朋友说点什么吧...">
								</u--textarea>
							</view>
							<image class="user_tx" :src="imgUrl" mode=""></image>
						</view>
						<button class="but" @click="go_send">发送</button>
					</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				selectedUsers: [],
				imgUrl: "",
				sendPopup:false,
				users: [{
						id: 1,
						name: 'Alice',
						avatar: require("@/static/img/logo.png"),
						selected: false
					},
					{
						id: 2,
						name: 'Bob',
						avatar: require("@/static/Myimg/back.jpg"),
						selected: false
					},
					{
						id: 3,
						name: 'Alice',
						avatar: require("@/static/img/logo.png"),
						selected: false
					},
					{
						id: 4,
						name: 'Bob',
						avatar: require("@/static/Myimg/back.jpg"),
						selected: false
					},
					{
						id: 5,
						name: 'Alice',
						avatar: require("@/static/img/logo.png"),
						selected: false
					},
					{
						id: 6,
						name: 'Bob',
						avatar: require("@/static/Myimg/back.jpg"),
						selected: false
					},
					{
						id: 7,
						name: 'Alice',
						avatar: require("@/static/img/logo.png"),
						selected: false
					},
					{
						id: 8,
						name: 'Bob',
						avatar: require("@/static/Myimg/back.jpg"),
						selected: false
					},
					{
						id: 9,
						name: 'Bob1',
						avatar: require("@/static/Myimg/back.jpg"),
						selected: false
					},
					{
						id: 10,
						name: 'Bob2',
						avatar: require("@/static/Myimg/back.jpg"),
						selected: false
					},
					{
						id: 11,
						name: 'Bob3',
						avatar: require("@/static/Myimg/back.jpg"),
						selected: false
					},
					{
						id: 12,
						name: 'Bob4',
						avatar: require("@/static/Myimg/back.jpg"),
						selected: false
					},
					{
						id: 13,
						name: 'Bob5',
						avatar: require("@/static/Myimg/back.jpg"),
						selected: false
					}
					// 更多用户...
				],
				cross_users: [{
						id: 1,
						name: '夏天',
						avatar: require("@/static/Myimg/xt.jpg"),
					},
					{
						id: 2,
						name: '橘子',
						avatar: require("@/static/Myimg/jz.jpg"),
					},
					{
						id: 3,
						name: '傻妞',
						avatar: require("@/static/Myimg/xt.jpg"),
					},
					{
						id: 4,
						name: '瑟庄妮',
						avatar: require("@/static/Myimg/jz.jpg"),
						selected: false
					}
				],
				all_users: [{
						id: 1,
						name: '夏天',
						avatar: require("@/static/Myimg/xt.jpg"),
						selected: false
					},
					{
						id: 2,
						name: '橘子',
						avatar: require("@/static/Myimg/jz.jpg"),
						selected: false
					},
					{
						id: 3,
						name: '傻妞',
						avatar: require("@/static/Myimg/xt.jpg"),
						selected: false
					},
					{
						id: 4,
						name: '瑟庄妮',
						avatar: require("@/static/Myimg/jz.jpg"),
						selected: false
					},
					{
						id: 5,
						name: 'Alice',
						avatar: require("@/static/img/logo.png"),
						selected: false
					},
					{
						id: 6,
						name: 'Bob',
						avatar: require("@/static/Myimg/back.jpg"),
						selected: false
					}

				]

			}
		},
		methods: {
			goBack() {
				// 实现返回逻辑
				console.log('用户点击取消')
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			send(item) {
				console.log(item);
				item.selected = !item.cheked;
				const index = this.selectedUsers.indexOf(item);
				// 如果已选中，从数组中删除
								if (index !== -1) {
									this.selectedUsers.splice(index, 1);
								} else {
									// 如果没有选中，添加到数组中
									this.selectedUsers.push(item);
								}
				console.log(this.selectedUsers);
				if(this.selectedUsers.length>0){
					this.sendPopup = true
				}else{
					this.sendPopup = false
				}
			},
			go_send(){
				uni.showModal({
					content: '发送成功',
					showCancel: false
				});
				// uni.navigateBack({
				// 	delta:2
				// })
			},
			myGroup(){
				
			}

		},
		onLoad(e) {
			console.log(e);
			this.imgUrl = decodeURIComponent(e.imgUrl);
		}
	}
</script>

<style scoped>
	.iconfont {
		width: 40rpx;
		height: 40rpx;
	}
	.up_body {
		width: 100%;
		height: 470rpx;
		background-color: #f6f6f6;
	}

	.top {
		width: 100%;
		height: 200rpx;
		position: fixed;
		background-color: #f6f6f6;
		z-index: 99;
		margin-top: -50rpx;
	}

	.top_banner {
		width: 100%;
		height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		display: flex;
		justify-content: flex-start;
	}
	.goback {
		display: block;
		margin-left: 30rpx;
		margin-top: 26rpx;
	}

	.top_title {
		margin-left: 240rpx;
	}

	.search_box {
		margin: 20rpx;
	}

	.user_list {
		/* 根据UI图调整用户列表的样式 */
		width: 100%;
		height: 180rpx;
		display: flex;
		flex-wrap: nowrap;
		padding: 20rpx;
		overflow: auto;
		margin-top: 180rpx;
	}

	.user_list::-webkit-scrollbar {
		display: none;
	}

	.user_item {
		width: 120rpx;

		/* 根据UI图调整用户项的样式 */
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		flex-shrink: 0;
		align-items: centecccfr;
		margin-bottom: 20rpx;
		margin-left: 20rpx;

	}

	.user_avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.user_name {
		font-size: 28rpx;
		display: block;
		margin-left: 20rpx;
		color: #9c9c9c;
	}
	.right_go {
		margin-left: 520rpx;
		margin-top: 30rpx;
	}

	.Chat_recently {
		overflow-y: auto;
	}

	.Chat_recently_content {
		width: 90%;
		margin-left: 40rpx;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10rpx;
	}

	.Chat_recently::-webkit-scrollbar {
		display: none;
	}

	.content_item {
		width: 100%;
		height: 120rpx;

	}

	.choose_k {
		margin-top: 30rpx;
		width: 50rpx;
	}

	.item_img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;

	}

	.item_img_box {
		width: 80rpx;
		height: 80rpx;
		margin: -60rpx 70rpx;
	}

	.most_bottom {
		width: 100%;
		height: 100rpx;
		background-color: #f6f6f6;
		margin-top: -25rpx;
		color: #b0b0b0;
		text-align: center;
		line-height: 100rpx;
	}

	.popup_box {
		width: 100%;
		height: 500rpx;
        position: fixed; /* 使弹出框相对于视口固定 */
		background-color: #f6f6f6;
       /* 设置弹出框的位置 */
        bottom: 0rpx;
        
	}

	.popup_img {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.popup_text {
		display: block;
		width: 150rpx;
		height: 45rpx;
		margin-left: 40rpx;
		margin-top: 35rpx;
	}

	.img_box {
		width: 551rpx;
		display: flex;
		flex-shrink: 0;
		margin-top: 25rpx;
		overflow-x: auto;
	}

	.popup_box_first {
		width: 100%;
		height: 100rpx;
		display: flex;
	}
   .popup_box_core{
	   display: flex;
	   justify-content: space-around;
	   background-color: #fff;
   }
	.user_tx {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-top: 20rpx;
		margin-right: 20rpx;
		
	}
	.popup_box_content{
		width: 75%;
		height: 300rpx;
	}
	.but{
		width: 80%;
		height: 70rpx;
		background-color: #ff2442;
		border-radius: 60rpx;
		color: white;
		line-height: 70rpx;
	}
	.nul{
		width: 100%;
		height: 500rpx;
	}
</style>